<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        // 通过类的方式定义组件
        class Welcome extends React.Component{
            render(){
                return(
                    <h1>Hello {this.props.name}</h1>
                );
            }
        }

        // 定义一个大组件，包含上面的组件

        class WelcomeAll extends React.Component{
            render(){
                return(
                    <div>
                        <Welcome name = "Sara" />
                        <Welcome name = "Alice"/>
                        <Welcome name = "Rose"/>    
                    </div>
                );
            }
        }

       // 渲染组件
    //    ReactDOM.render(
    //        <Welcome name = "World" />,
    //        document.getElementById("root")
    //    )
        //    渲染大组件
        ReactDOM.render(
            <WelcomeAll />,
            document.getElementById("root")
        )
    </script>
</body>
</html>